<template>
  <div class="recomend-select">
    <div class="select-wraper">
      <!-- 当前推荐选择器的标题 -->
      <div class="select-title">{{ selectInfo.currentTitle }}</div>
      <!-- 包裹所有推荐item的容器 -->
      <div class="select-items-wraper">
        <!-- 遍历循环所有的推荐item进行展示 -->
        <select-item v-for="(item, index) in selectInfo.selectItemList" :key="index">
          <img :src="item.img" alt="优品" slot="select-item-img">
          <span slot="select-item-title">{{ item.title }}</span>
        </select-item>
      </div>
    </div>
    <!-- 选项 -->
    
  </div>
</template>

<script>
import selectItem from "./recomendSelectItem.vue";
export default {
  name: "recomendSelect",
  // 注册组件
  components: {
    selectItem,
  },
  
  props: {
    selectInfo:{
      type:Object,
      default(){
        return {
          currentTitle:"加载中",
          selectItemList:[]
        }
      }
    }
  },
  data() {
    return {
      
    };
  },
  watch: {},
  computed: {},
  methods: {
    
  },
  created() {
    
    
  },
  mounted() {},
};
</script>
<style scoped>
.recomend-select {
  background-color: #fff;
  margin-top: 10px;
  padding-top: 10px;
}
.select-title{
  font-size: 20px;
  font-family:"黑体";
  font-weight: 500;
  text-align: center;
  color:rgb(46, 46, 46);
  margin-bottom: 10px;
  margin-top: 10px;
}
.select-items-wraper{
  display:flex;
  width: 100vw;
  flex-wrap: wrap;
  padding:20px 0;
}

</style>